<template>
  <div class="parameterbox">
    <el-divider content-position="left">参数</el-divider>

    <el-form
      :model="dynamicValidateForm"
      ref="dynamicValidateForm"
      label-width="100px"
      class="demo-dynamic"
    >
      <div class="parametertitle">
        <div>参数名称</div>
        <div>参数值</div>
      </div>
      <el-form-item
        v-for="(domain, index) in this.addgoodsinfo.paramsList"
        :key="domain.key"
      >
        <el-input
          :style="{ width: '20%' }"
          v-model="domain.paramsName"
        ></el-input>
        <el-input
          :style="{ width: '36%', marginLeft: '80px' }"
          v-model="domain.paramsValue"
        ></el-input>
        <el-button
          :style="{ marginLeft: '10px' }"
          @click.prevent="removeDomain(domain)"
        >
          <i class="el-icon-delete"></i>
        </el-button>
      </el-form-item>
      <el-form-item>
        <!-- <el-button  @click="submitForm('dynamicValidateForm')"
          >提交</el-button
        > -->
        <el-button type="primary" @click="addDomain">+添加参数</el-button>
        <!-- <el-button @click="resetForm('dynamicValidateForm')">重置</el-button> -->
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  name: "GoodsParameter",
  props: {
    addgoodsinfo: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      dynamicValidateForm: {
        paramsList: [
          { paramsName: null, paramsValue: null, key: Date.now(), goodsId: null },
        ],
      },
    };
  },
  methods: {
    // emitparameter() {
    //   return this.dynamicValidateForm.paramsList;
    // },
    // submitForm(formName) {
    //   this.$refs[formName].validate((valid) => {
    //     if (valid) {
    //       alert("submit!");
    //     } else {
     
    //       return false;
    //     }
    //   });
    // },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    removeDomain(item) {
      var index = this.addgoodsinfo.paramsList.indexOf(item);
      if (index !== -1) {
        this.addgoodsinfo.paramsList.splice(index, 1);
      }
    },
    addDomain() {
      this.addgoodsinfo.paramsList.push({
        paramsValue: "",
        goodsId: null,
        key: Date.now(),
      });
    },
  },
  watch: {
    addgoodsinfo: {
      handler(newVal, oldVal) {
        // 当addgoodsinfo发生变化时执行的逻辑
      },
      deep: true, // 如果addgoodsinfo是一个对象，需要加上deep:true
    },
  },
};
</script>
